<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .mainDiv{
      width: 50%;
      height: 700px;
    }
    #shopDiv{
      width: 900px;
      height: 700px;
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: rgba(0,0,0,0.3);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
  <script src="book.js"></script>
  <script>
    function $(id) {
      return document.getElementById(id);
    }
    window.onload =function () {
        showTable(bookArray);
        var trArray = $("data").getElementsByTagName("tr");
        for (let i=0;i<trArray.length;i++){
          trArray[i].onclick = function () {
              trClick(this);
          }
        }
        var inputArray = $("carData").getElementsByTagName("input");
        for (let i=0;i<inputArray.length;i++){
          if (inputArray[i].type=="text"){
            inputArray[i].onblur = function () {
              changNum(this);
            }
          }
          else if (inputArray[i].type=="button"){
            inputArray[i].onclick = function () {
              removeBook(this);
            }
          }
        }
    }
    /**
     * 查看书籍信息
     */
    var colorTr = null;
    function trClick(trObj) {
      if (colorTr!=null){
        colorTr.style.backgroundColor = "white";
      }
      trObj.style.backgroundColor = "#cccccc"
      colorTr = trObj;
      let obj = bookArray.find(n=>n.code==trObj.id);
      $("pName").innerHTML = obj.bookName;
      $("pWriter").innerHTML = obj.writer;
      $("pTime").innerHTML = obj.time;
      $("pPrice").innerHTML = obj.price;
      $("leftDiv").style.visibility = "visible";
    }
    /**
     * 填充表格数据
     */
    function showTable(bookArray) {
      let str ="";
      bookArray.forEach(n=>{
        str += `<tr id="${n.code}"><td>${n.bookName}</td><td>${n.writer}</td><td>${n.price}</td></tr>`;
      });
      $("data").innerHTML = str;
    }
    /**
     * 按姓名查找
     */
    function findByName() {
      let Array = bookArray.filter(n => n.bookName.indexOf($("name").value)!=-1);
      showTable(Array);
    }
    /**
     *添加到购物车
     */
    function addShopCar() {
      $("shopDiv").style.visibility = "visible";
      $("shopDiv").style.height = document.documentElement.clientHeight+"px";
      $("shopDiv").style.width = document.documentElement.clientWidth+"px";
      checkBook();
      computTotalPrice();
    }
    /**
     * 填充购物车数据
     */
    function showShopTable(shopCarArray) {
      let str = "";
      let total = 0;
      shopCarArray.forEach(n=>{
        str +=`<tr id="${n.shopCode}"><td>${n.shopName}</td><td>${n.shopPrice}</td><td>
        <input type="number" value="${n.shopNum}" min="1" onblur="changNum(this,${n.shopCode})"></td>
        <td>${n.shopPrice*n.shopNum}</td><td><input type="button" value="移除商品" onclick="del()"></td></tr>`
        total += n.shopPrice * n.shopNum;
      });
      $("carData").innerHTML = str;
      $("totalSpan").innerHTML = total;
    }
    /**
     * 验证
     */
    function checkBook() {
      let indexB = bookArray.findIndex(n=>n.code == colorTr.id);
      let indexS = shopCarArray.findIndex(n=>n.shopCode == colorTr.id);
      shopCarArray.forEach(n=>console.log(n));
      if (indexS==-1){
        let obj = {shopCode:bookArray[indexB].code,shopName:bookArray[indexB].bookName,
          shopPrice:bookArray[indexB].price,shopNum:1};
        shopCarArray.push(obj);
      }
      else {
        shopCarArray[indexS].shopNum += 1;
      }
      showShopTable(shopCarArray);
    }
    /**
     * 修改购买数量
     * @param textObj 数量文本框对象
     */
    function changNum(textObj,id) {

      if (textObj.value.length == 0 || textObj.value < 1) {
        textObj.value = 1;
      }
      let price = textObj.parentNode.previousElementSibling.innerHTML;
      let tdObj = textObj.parentNode.nextElementSibling;
      tdObj.innerHTML = price * textObj.value;
      let index =shopCarArray.findIndex(n => n.shopCode == id);
      shopCarArray[index].shopNum = textObj.value;
      // computTotalPrice();
      showShopTable(shopCarArray);
    }

    // /**
    //  * 计算总价
    //  */
    // function computTotalPrice() {
    //   let sum = 0;
    //   //得到所有的tr元素
    //   let trArray = $("carData").getElementsByTagName("tr");
    //   for (let i=0;i<trArray.length;i++){
    //     //得到每一行的td元素集合
    //     let tdArray = trArray[i].getElementsByTagName("td");
    //     sum += parseInt(tdArray[3].innerHTML)
    //   }
    //   $("totalSpan").innerHTML = sum;
    // }
    /**
     * 删除
     */
    function del(code) {
      let  index =shopCarArray.findIndex(n => n.orderCode == code);
      shopCarArray.splice(index, 1);
      showShopTable(shopCarArray);
      computTotalPrice();
    }
    /**
     * 继续购物
     */
    function continueShop() {
      $("shopDiv").style.visibility = "hidden";
    }
  </script>
</head>
<body style="display: flex">
 <div class="mainDiv" id="leftDiv" style="visibility: hidden">
   图书名：<span id="pName"></span><br>
   作者：<span id="pWriter"></span><br>
   出版时间：<span id="pTime"></span><br>
   售价：<span id="pPrice"></span><br>
   <input type="button" value="加入购物车" onclick="addShopCar()">
 </div>
 <div class="mainDiv">
   <h1 style="text-align: center">图书一览</h1>
   <table border="1" cellspacing="0" width="100%">
     <thead>
     <tr><th>图书名</th><th>作者</th><th>销售价</th></tr>
     </thead>
     <tbody id="data">

     </tbody>
   </table>
   图书名：<input type="text" id="name">
   <input type="button" value="查询" onclick="findByName()">
 </div>
  <div id="shopDiv" style="visibility: hidden">
    <div style="background-color: #fffec8;width: 700px;height: 500px">
      <table width="100%" border="1" cellspacing="0">
        <thead>
        <tr><th>商品名</th><th>单价</th><th>数量</th><th>总价</th><th>移除商品</th></tr>
        </thead>
        <tbody id="carData">
<!--         <tr><td>十年编程经验</td><td>45</td><td><input type="number" value="1" min="1"></td>-->
<!--           <td>45</td><td><input type="button" value="移除商品"></td></tr>-->

<!--         <tr><td>SQL Server编程</td><td>29</td><td><input type="number" value="1" min="1"></td>-->
<!--           <td>45</td><td><input type="button" value="移除商品"></td></tr>-->
        </tbody>
      </table>
      <div style="margin-top: 300px">
        <input type="button" value="继续购物" onclick="continueShop()"><span></span>总价：￥<span id="totalSpan"></span>
      </div>
    </div>
  </div>
</body>
</html>
